<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <!--
        其他样式的ztree
        <link rel="stylesheet" type="text/css" href="/ztree/css/zTreeStyle/zTreeStyle.css">
        <link rel="stylesheet" href="/ztree/css/awesomeStyle/awesome.css"/>
    -->
    <link rel="stylesheet" href="/ztree/css/metroStyle/metroStyle.css"/>
    <script type="text/javascript" src="/ztree/js/jquery.ztree.all.min.js"></script>
    <script type="text/javascript" src="/ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/ztree/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="/ztree/js/jquery.ztree.exedit.js"></script>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100%;
            height: 1030px;
        }
        .list{
            width: 1650px;
            height: 50px;
            margin-left: 20px;
            background-color:rgb(243,243,243);
        }
        .list-left{
            width: 100px;
            height: 30px;
            margin-top: 10px;
            float: left;
        }
        .list-left-left{
            width: 10px;
            height: 30px;
            float: left;
            background: green;
        }
        .list-left-right{
            width: 80px;
            height: 30px;
            font-size: 14px;
            line-height: 30px;
            float: left;
            text-indent: 5px;
        }
        .list-right{
            float: right;
            margin-top: 5px;
            margin-right: 45px;
        }
        .query{
            width: 1650px;
            height: 100px;
            margin-top: 20px;
            margin-left: 20px;
        }
        .layui-col-md11{
            width: 100%;
        }
        .layui-card-header{
            background-color:rgb(243,243,243);
        }
        .query-top-right{
            float: right;
            margin-right: 30px;
        }
        .layui-form-label{
            width: 109px;
            padding-left: 80px;
        }
        .layui-form-item .layui-input-inline {
            float: left;
            width: 200px;
            margin-right: 10px;
        }
        .record{
            width: 1650px;
            height: 821px;
            margin-top: 40px;
            margin-left: 20px;
            background-color:rgb(243,243,243);
        }
        .import{
            margin-left: 870px;
        }
        #button_ids{
            display: none;
        }
        .record-left{
            width: 300px;
            float: left;
        }
        .record-right{
            width: 1350px;
            height: 700px;
            float: left;
        }
        .layui-table-cell {
            line-height: 47px;
            height: inherit;
        }
        .layui-table-cell>a{
            color:green;
        }
        .layui-table-fixed {
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 101;
        }
        #rMenu {
            width: 48px;
            height: 97px;
            display: none;
        }
        .rMenuspan{
            width: 68px;
            height: 21px;
            line-height: 21px;
            font-size: 10px;
            border: 1px silver solid;
            margin: 1px;
            padding: 2px 6px;
            background-color: #DFDFDF;
        }
        img{
            width: 100px;
            height: 116px;
        }
    </style>
</head>
<body>
<div class="box">
    <!--商品列表-->
    <div class="list">
        <div class="list-left">
            <div class="list-left-left"></div>
            <p class="list-left-right">微圈列表</p>
        </div>
        <div class="list-right">
            <div class="list-right-left layui-btn layui-icon layui-icon-refresh" id="refresh">&nbsp;刷新</div>
            <div class="list-right-right layui-btn layui-icon layui-icon-left" id="goBack">&nbsp;返回</div>
        </div>
    </div>
    <!--筛选查询-->
    <div class="layui-row query">
        <div class="layui-col-md11">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backColor">
                    <i class="layui-icon">&#xe615;</i>
                    筛选查询

                </div>
                <div class="layui-card-body">
                    <form class="layui-form" lay-filter="layForm">
                        <div class="layui-form-item">
                            <label class="layui-form-label">文章名称：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="artcleTitle" required lay-verify="required" placeholder="请输入文章名称" autocomplete="off" class="layui-input">
                            </div>

                            <label class="layui-form-label">用户名称：</label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="请输入用户名称" class="layui-input" name="userName"/>
                            </div>

                            <label class="layui-form-label">用户账号：</label>
                            <div class="layui-input-inline">
                                <input type="text" placeholder="请输入要查询的账号" class="layui-input" name="account"/>
                            </div>

                            <span>
                                <button type="reset" class="layui-btn layui-btn-warm query-top-right">
                                    <i class="layui-icon layui-icon-refresh"></i> 重置
                                </button>
                                <div class="query-top-right layui-btn" onclick="search()"><i class="layui-icon layui-icon-search"></i>搜索</div>
                                <!-- layui自带的重置功能 -->
                            </span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--数据列表-->
    <div class="record">
        <div class="record-left">
            <!--树-->
            <ul id="treeDemo" class="ztree" style="margin-top: 20px;margin-left: 40px"></ul>
        </div>
        <div class="record-right">
            <!--表-->
            <table id="demoTable" lay-filter="demoTable"></table>
        </div>
    </div>
    <!--表头样式-->
    <div id="button_ids">
        <i class="layui-icon layui-icon-align-left"></i> 数据列表

    </div>
    <!--表内操作-->
    <div id="btnOperation" style="display:none" >
        <a alt="查看" title="查看"  lay-event="selectTable">查看</a>
        <a alt="删除" title="删除"  lay-event="updateTable">删除</a>
    </div>
    <div id="rMenu">
        <ul>
            <li class="rMenuspan" id="m_add" onclick="addTreeNode();">增加节点</li>
            <li class="rMenuspan"  id="m_del" onclick="removeTreeNode();">删除节点</li>
            <li class="rMenuspan"  id="m_edit" onclick="edit();">编辑节点</li>
        </ul>
    </div>
    <div hidden>
        <input type="text" class="acticleCategroyId"/>
        <input type="text" class="childNode"/>
        <!-- 返回 -->
        <p id="title" style="display: none;">微圈列表</p>
    </div>

</div>

<input type="hidden" name="ProductRetrieval" id="ProductRetrieval"/>

<script>
    layui.use(['jquery','layer','table','form','upload'],function(){
        var $=layui.jquery;
        var layer=layui.layer;
        var table=layui.table;
        var form=layui.form;
        var upload=layui.upload;

        var setting = {
            data:{
                simpleData: {
                    enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式
                    idKey: "acticleCategroyId",  //节点数据中保存唯一标识的属性名称
                    pIdKey: "parentId",    //节点数据中保存其父节点唯一标识的属性名称
                    rootPId: -1  //用于修正根节点父节点数据，即 pIdKey 指定的属性值
                },
                key: {
                    name: "artcleCategroyName"  //zTree 节点数据保存节点名称的属性名称  默认值："name"
                }
            },
            callback:{
                onRightClick:rightClick,//右键后的回调
                onClick:zTreeOnClick,//鼠标点击事件的回调

            },
            view:{
                showLine: false,
                dblClickExpand :false
            }
        };


        var zTree;
        zTreeFunction();
        //返回
        $('#goBack').click(function () {
            var title = $('#title').text();
            var iframe = parent.$('.iframe');
            $.each(iframe,function (i,item) {
                if(title == $(item).attr('_href')){
                    parent.$('#beforeHref').val($(item).attr('_href'));
                    parent.beforeHref();
                    return;
                }
            });
        });

        function zTreeFunction(){
            $("document").ready(function () {
                $.ajax({
                    url:"/JsActicleCategroy/getAllJsActicleCategroy",
                    data:{},
                    type:'post',
                    dataType:'json',
                    success:function (data) {
                        zTree = $.fn.zTree.init($("#treeDemo"), setting, data.data);//初始化树
                        zTree.expandAll(true);    //true 节点全部展开、false节点收缩

                    }
                })
            })
        }

        //点击左树节点展示对应分类
        function zTreeOnClick(event, treeId, treeNode) {

            if(treeNode.acticleCategroyId == "50"){
                var layForm = {
                    "artcleTitle":'',
                    "userName":'',
                    "account":'',
                    "acticleCategroyId":""
                };
                getTable(layForm);
            }else{
                var layForm = {
                    "artcleTitle":'',
                    "userName":'',
                    "account":'',
                    "acticleCategroyId":treeNode.acticleCategroyId
                };
                getTable(layForm);
            }

        };
        function rightClick(event, treeId, treeNode){
            event.preventDefault();
            $(".acticleCategroyId").val(treeNode.acticleCategroyId);

            if (treeNode.isParent){
                $(".childNode").val("当前节点不是叶子节点");
            }

            $("#rMenu").css("display","inline");
            if (event.target.tagName.toLowerCase() == "span"){
                var top = event.clientY;
                var left = event.clientX;
                $("#rMenu").css("position","absolute");
                $("#rMenu").css("top",top);
                $("#rMenu").css("left",left);
                $("#rMenu").css("display","inline");
            }

        }
        addTreeNode = function addTreeNode() {
            var acticleCategroyId = $(".acticleCategroyId").val();

            layer.prompt({
                title:"请输入节点分类内容"
            },function(value, index, elem){
                var user = JSON.parse(localStorage.getItem("user"));
                var artcleCategroyName = value;
                var parentId = acticleCategroyId;

                $.ajax({
                    //添加一个节点
                    url:"/JsActicleCategroy/addJsActicleCategroy",
                    data:{"artcleCategroyName":artcleCategroyName,"parentId":parentId,"createId":user.data.userId,"createDate":getTime()},
                    type:'post',
                    dataTYpe:'json',
                    success:function (data) {
                        if (data.data == true) {
                            zTreeFunction();
                            $("#rMenu").css("display","none");
                        }else{
                            layer.msg("添加失败")
                        }
                    }
                });
                layer.close(index);
            });
        }

        edit = function edit(){
            var acticleCategroyId = $(".acticleCategroyId").val();
            layer.prompt({
                title:"请输入修改节点分类名称"
            },function(value, index, elem){
                var artcleCategroyName = value;
                var user = JSON.parse(localStorage.getItem("user"));
                var updateDate = getTime();
                    $.ajax({
                    //修改一个节点名称
                    url:"/JsActicleCategroy/editJsActicleCategroy",
                    data:{"artcleCategroyName":artcleCategroyName,"acticleCategroyId":acticleCategroyId,"updateId":user.data.userId,"updateDate":getTime()},
                    type:'post',
                    dataTYpe:'json',
                    success:function (data) {
                        if (data.data == true) {
                            zTreeFunction();
                            $("#rMenu").css("display","none");
                        }else{
                            layer.msg("修改失败")
                        }
                    }
                });
                layer.close(index);
            });
        }
        removeTreeNode = function removeTreeNode(){
            var childNode = $(".childNode").val();
            if(childNode == "当前节点不是叶子节点"){
                layer.msg("当前节点不是叶子节点");
            }else{
                var acticleCategroyId = $(".acticleCategroyId").val();
                layer.confirm('是否确定删除当前节点?', {icon: 3, title:'提示'}, function(index){
                    $.ajax({
                        //添加一个节点
                        url:"/JsActicleCategroy/deleteJsActicleCategroy",
                        data:{"acticleCategroyId":acticleCategroyId},
                        type:'post',
                        dataTYpe:'json',
                        success:function (data) {
                            if (data.data == true) {
                                zTreeFunction();
                                $("#rMenu").css("display","none");
                            }else{
                                layer.msg("删除失败")
                            }
                        }
                    });
                    layer.close(index);
                });
            }




        }

        search = function search(){
            var layForm = form.val("layForm");
            //向微圈操作日志列表添加一条搜索数据
            var type = 5;
            var remark = "搜索反馈统计";

            addJsLog(type,remark);
            getTable(layForm);
        }




        var layForm = {
            "artcleTitle":'',
            "userName":'',
            "account":''
        };
        getTable(layForm);

        function getTable(layForm){
            $.ajax({
                url:"/JsMicrocircle/getAllJsMicrocircle",
                type:"post",
                dataType:"json",
                data:layForm,
                success:function (data) {
                    demoTable(data.data);
                }
            })
        }
        //刷新
        $("#refresh").click(function () {
            location.reload();
        });

        /*表格*/
        function demoTable(data){
            table.render({
                elem:'#demoTable',
                title:"委托书",
                data:data,
                toolbar:'#button_ids',
                limit:10,
                width:1320,
                page:{
                    layout:['count','prev','page','next','limit','skip','refresh'],
                    limits:[10,20,30],
                    first:"首页",
                    last:"尾页",
                },
                cols:[[
                    {type:'checkbox'},
                    {field:"",title:"序号",align:'center',width:80,templet:function (data) {
                            return data.LAY_INDEX;
                        }},
                    {field:"userName",title:"用户昵称",align:'center',width:130},
                    {field:"artcleTitle",title:"文章标题",align:'center',width:170},
                    {field:"createDate",title:"创建时间",align:'center',width:180},
                    {field:"account",title:"用户账号",align:'center',width:125},
                    {field:"acticleHits",title:"点赞数量",align:'center',width:100},
                    {field:"acticleLike",title:"收藏数量",align:'center',width:100},
                    {field:"acticleReviews",title:"评论数量",align:'center',width:100},
                    {field:"acticleShare",title:"分享数量",align:'center',width:100},
                    {field:'',title:"操作",align:'center',width:175,toolbar:"#btnOperation"}
                ]]
            });

            table.on("tool(demoTable)",function (obj) {
                if (obj.event == "selectTable"){
                    localStorage.setItem("commentMicrocircle",JSON.stringify(obj.data));
                    layer.open({
                        type:2,
                        title:'微圈管理',
                        area:['95%','100%'],
                        scrollbar: false,
                        offset:'auto',
                        btn:["确定","取消"],
                        content:"Administration-microCircle.html",
                        success:function (layero, index) {

                            var data = layero.find('iframe').contents();
                            data.find("#userName").text(obj.data.userName);
                            data.find("th[name=artcleTitle]").text(obj.data.artcleTitle);
                            data.find("th[name=userName]").text(obj.data.userName);
                            data.find("th[name=artcleCategroyName]").text(obj.data.artcleCategroyName);
                            data.find("th[name=releaseDate]").text(obj.data.releaseDate);
                            data.find("th[name=account]").text(obj.data.account);
                            data.find("th[name=artcleTitle]").text(obj.data.artcleTitle);
                            data.find("th[name=article]").html(obj.data.article);
                            localStorage.setItem("artcleUrl",obj.data.artcleUrl);
                            data.find("th[name=acticleHits]").text(obj.data.acticleHits);
                            data.find("th[name=acticleLike]").text(obj.data.acticleLike);
                            data.find("th[name=acticleReviews]").text(obj.data.acticleReviews);
                            data.find("th[name=acticleShare]").text(obj.data.acticleShare);
                            var user = localStorage.getItem("user");
                            localStorage.setItem("userAcatarUrl",obj.data.userAcatarUrl);
                            user = JSON.parse(user);
                            data.find("input[name=trueName]").val(user.data.trueName);
                            data.find("input[name=account]").val(user.data.account);
                            data.find("input[name=userId]").val(user.data.userId);
                            //评论
                            data.find("input[name=acticleHits]").val(obj.data.acticleHits);
                            data.find("input[name=acticleLike]").val(obj.data.acticleLike);
                            data.find("input[name=acticleReviews]").val(obj.data.acticleReviews);
                            data.find("input[name=acticleShare]").val(obj.data.acticleShare);
                            //向微圈操作日志列表添加一条数据
                            var type = 1;
                            var remark = "查看反馈统计";

                            addJsLog(type,remark);

                        },
                        yes:function (index, layero) {
                            layer.close(index);
                        },
                        but2:function (index, layero) {
                            layer.close(index);
                        }
                    })

                } else{
                    layer.confirm('确定删除当前文章吗?', {icon: 3, title:'删除'}, function(index){
                        $.ajax({
                            url:"/JsMicrocircle/deleteByIdJsMicrocircle",
                            data:{"microcircleId":obj.data.microcircleId},
                            type:'post',
                            dataType:'json',
                            success:function (data) {
                                if (data.data == true) {
                                    //向操作日志列表添加一条数据

                                    layer.msg("删除成功");
                                    //向微圈操作日志列表添加一条数据
                                    var type = 3;
                                    var remark = "删除反馈统计";

                                    addJsLog(type,remark);


                                    getTable(layForm);
                                }else{
                                    layer.msg("删除失败");
                                    getTable(layForm);
                                }
                            }
                        });
                        layer.close(index);
                    });


                }
            });



        }

        function addJsLog(type,remark){
            //向微圈操作日志列表添加一条数据
            var user = localStorage.getItem("user");
            user = JSON.parse(user);
            var param = {
                "logType":3,
                "type":type,
                "userId":user.data.userId,
                "createDate":getTime(),
                "remark":remark
            };
            $.ajax({
                url:"/JsLog/addJsLogMicroCircle",
                data:param,
                type:'post',
                dataType:'json',
                success:function (data) {
                }
            });
        }





        //现在时间
        function getTime(){
            var date=new Date();
            var year=date.getFullYear();
            var month=date.getMonth()+1;
            var day=date.getDate();
            var hour=date.getHours();
            var minute=date.getMinutes();
            var second=date.getSeconds();
            var dateStr = year+"-"+zeroFilling(month)+"-"+zeroFilling(day)+" "+zeroFilling(hour)+":"+zeroFilling(minute)+":"+zeroFilling(second);
           return dateStr;
        }
        function zeroFilling(data){
            if(data<10){
                data="0"+data;
            }
            return data;
        }
    })
</script>
</body>
</html>